<template>
    <div class="toolbars">
        <!-- 左对齐，居中，右对齐，有序列表，加粗，斜体，下划线，插入时间，颜色 -->
        <button class="items" @click="justifyleft">
            <v-icon name="icon_justifyleft" :size="18"></v-icon>
        </button>
        <button class="items" @click="justifycenter">
            <v-icon name="icon_justifycenter" :size="18"></v-icon>
        </button>
        <button class="items" @click="justifyright">
            <v-icon name="icon_justifyright" :size="18"></v-icon>
        </button>
        <button class="items" @click="insertOrderedList">
            <v-icon name="icon_insertOrderedList" :size="18"></v-icon>
        </button>
        <button class="items" @click="bold">
            <v-icon name="icon_bold" :size="18"></v-icon>
        </button>
        <button class="items" @click="italic">
            <v-icon name="icon_italic" :size="18"></v-icon>
        </button>
        <button class="items" @click="underline">
            <v-icon name="icon_underline" :size="18"></v-icon>
        </button>
        <button class="items" @click="instertTime">
            <v-icon name="icon_instertTime" :size="18"></v-icon>
        </button>
        <button class="coloritme" v-for="item in colors" :key="item" @click="fontcolor(item)">
            <div :style="{ background: item }"></div>
        </button>
    </div>
</template>

<script setup lang="ts">

const colors = ref<any[]>(["#4b5563", "#8b5cf6", "#3b82f6", "#FFC000", "#10b981", "#ff0000", "#c00000"])

const justifyleft = () => {
    document.execCommand("justifyLeft", false, null);
}
const justifycenter = () => {
    document.execCommand("justifyCenter", true, null);
}
const justifyright = () => {
    document.execCommand("justifyRight", false, null);
}
const insertOrderedList = () => {
    document.execCommand("insertUnorderedList", false, null);
}
const bold = () => {
    document.execCommand("bold", false, null);
}
const italic = () => {
    document.execCommand("italic", false, null);
}
const underline = () => {
    document.execCommand("underline", false, null);
}
// 插入时间
const instertTime = () => {
    let time = new Date();
    let str = `<div class="tims" contenteditable="false">📌${time.toLocaleString()}</div>`;
    document.execCommand("insertHTML", false, str);
}
const fontcolor = (val: any) => {
    document.execCommand("foreColor", false, val);
}

</script>

<style lang="less" scoped>
.tims {
    background-color: #fed7aa;
    font-size: 12px;
    padding: 1px 3px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 8px;
}

.toolbars {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
        color: #475569;
    }
    .items {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        padding: 2px;
        border: none;
        cursor: pointer;
        outline: inherit;
        background: #fff;
        &:active {
            transform: scale(0.9);
        }     
    }
    .coloritme {
        width: 24px;
        height: 24px;
        padding: 2px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid #f1f5f9;
        cursor: pointer;
        outline: inherit;
        &>div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transition: all 0.1s;
        }
        &:hover {
            transform: scale(1.2);
        }
    }
}
</style>